<template>
  <div class="">
    <div id="user">
      <div>
        <div class="My_box">
          <div class="My_img">
            <img src="../assets/image/04.png" alt="" />
          </div>
          <p class="My_ji">积分：105</p>
        </div>
      </div>
      <div class="my_ding">
        <i class="van-icon van-icon-notes-o" id="van-icon"></i>
        <p>我的订单</p>
        <i class="van-icon van-icon-arrow"></i>
      </div>
      <div class="My_Den">
        <div>
          <i class="van-icon van-icon-paid" style="font-size: 0.6rem;"></i>
          <p>待付款</p>
        </div>
        <div>
          <i class="van-icon van-icon-send-gift-o" style="font-size: 0.6rem;"></i>
          <p>待发货</p>
        </div>
        <div>
          <i class="van-icon van-icon-logistics" style="font-size: 0.6rem;"></i>
          <p>待收货</p>
        </div>
        <div>
          <i class="van-icon van-icon-comment-o" style="font-size: 0.6rem;"></i>
          <p>待评价</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang='scss'>
body {
  background: #f5f5f5;
}
.My_box {
  width: 100%;
  height: 3.1rem;
  display: block;
  background: #c1b18f;
  position: relative;
}
#user > div:nth-of-type(1) > p:nth-of-type(1) {
  width: 1.53rem;
  height: 1.53rem;
  border-radius: 50%;
  position: absolute;
  left: 0.3rem;
  top: 0.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.My_img {
  width: 76.44px;
  height: 76.44px;
  position: absolute;
  top: 0.68rem;
  left: 0.3rem;
  > img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
.My_ji {
  width: 1.7rem;
  padding: 0.16rem;
  color: #fff;
  background: #b3a078;
  border-radius: 0.0694444444rem;
  position: absolute;
  left: 2.2rem;
  top: 1.5rem;
  opacity: 0.8;
  font-size: 0.14rem;
}
#van-icon {
  font-size: 0.4rem;
  color: #f7b94b;
}
.my_ding {
  height: 0.9rem;
  font-size: 0.3rem;
  display: flex;
  padding: 0 0.2rem;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  border-bottom: 0.01rem solid #e9e9e9;
  background: #ffffff;
}
.My_Den {
  height: 1.2rem;
  font-size: 0.3rem;
  display: flex;
  padding: 0 0.4rem;
  color: #6D6D6D;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  border-bottom: 0.01rem solid #e9e9e9;
  background: #ffffff;
}
</style>
